<template>
    <div class="Mydiscuss" v-loading="loading">
        <!--       公共顶部-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">评论</p>
        </Top>
        <div class="main">
            <!--列表-->
            <ul class="list" v-if="list.length>0" @click="replyBoxShow=false">
                <li class="items clearfix animated flipInX" :style="{animationDelay:delay(index)}" v-for="(item,index) in list" :key="index">
                    <!--1-->
                    <div class="head clearfix">
                        <img :src="item.member_avatar" alt="">
                        <div class="info">
                            <h2>{{item.comment_name}}</h2>
                            <p>{{item.add_time}}</p>
                        </div>
                    </div>
                    <!--2-->
                    <!--一层回复-->
                    <div class="content">{{item.comment_content}}<span v-if="item.show==='0'" class="btn" @click.stop="callReply(item,index)">回复</span><span v-if="item.show==='1'" class="btn" @click="delConfirm(item,index,-1)">删除</span></div>
                    <!--二层回复-->
                    <ul class="secend" v-if="item.reply.length>0">
                        <li class="animated flipInY" v-for="(item2,index2) in item.reply" :style="{animationDelay:delay(index2)}" :key="index2"><b>{{item2.comment_name}}</b>&#8197;回复&#8197;<b>{{item2.reply_name}}</b>：{{item2.comment_content}} <span v-if="item2.show==='1'" class="btn" @click="delConfirm(item2,index,index2)">删除</span></li>
                    </ul>
                    <!--3-->
                    <router-link 
                                 tag="div" 
                                 :to="{path:'/detail',query:{lession_id:item.lession_id,member_id:getMemberId()}}"
                                 class="lesson clearfix">
                        <img :src="item.lession_img" alt="">
                        <div class="info">
                            <h2>{{item.lession_name}}</h2>
                            <p>{{item.lession_desc}}</p>
                        </div>
                    </router-link>
                </li>
            </ul>
            <!--回复输入框-->
            <transition name="bounce-up">
                <div class="replyBox" v-if="replyBoxShow">
                    <input type="text" ref="commentDom" :placeholder="commentPlaceholder" v-model="commentContent" />
                    <span class="send" @click="postComment">发布</span>
                </div>
            </transition>
            <!--无数据时显示-->
            <div class="mid" v-if="list.length<=0">
                <div class="nodata animated fadeIn">
                    <!--<svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wushuju"></use>
                    </svg>-->
                    <img src="../../assets/huawa-off.png" alt="" />
                    <p>暂无数据..</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'

    export default {
        name: 'Mydiscuss',
        components: {
            Top,//顶部信息组件
        },
        data () {
            return {
                loading: false,//加载动画
                replyBoxShow:false,//回复框显示与否

                commentContent:'',//评论框内容
                comment_id:0,//当前回复的评论id
                lession_id:0,//当前回复的课程id
                commentPlaceholder:'说说您的看法..',//评论框holder

                list:[],//列表数据
            }
        },
        created(){
            this.init();
        },
        methods:{
            //初始化
            init(){
                this.loading = true;
                this.Posthttp('/?method=flower.user.mycomment',{member_id:this.getMemberId(),page:1},(res)=>{
                    this.loading = false;
                    /*登录是否成功*/
                    if(JSON.parse(res.bodyText).status ===1){
                        this.list = JSON.parse(res.bodyText).data.comment_list;
                    }else{
                        this.$message.warning(JSON.parse(res.bodyText).msg); 
                    }
                }); 
            },
            //评论框初始化
            replyBlur(){
                this.commentContent = '';
                this.comment_id = 0;
                this.lession_id = 0;
                this.commentPlaceholder = '说说您的看法..';
            },
            //回复调起输入框
            callReply(item,index){
                this.replyBoxShow = true;

                this.commentContent = '';//清空输入框
                this.commentPlaceholder = '回复'+item.comment_name+'：';//更改placeholder
                this.comment_id = item.comment_id;//当前回复的评论id
                this.lession_id = item.lession_id;//当前回复的课程id
                this.$nextTick(function () {
                    this.$refs.commentDom.focus();//聚焦
                })
            },
            //发布回复
            postComment(){
                if(!(this.commentContent.trim()))return;

                this.loading = true;//动画
                this.Posthttp('/?method=flower.user.comment',{member_id:this.getMemberId(),content:this.commentContent,lession_id:this.lession_id,comment_id:this.comment_id},(res)=>{
                    this.loading = false;//动画

                    if(JSON.parse(res.bodyText).status === 0){
                        this.$message.warning(JSON.parse(res.bodyText).msg);
                    }else if(JSON.parse(res.bodyText).status === 1){
                        //输入框重置
                        this.replyBlur();

                        //一级，二级回复判断
                        if(JSON.parse(res.bodyText).data.comment.comment_depth == 1){

                            this.list.unshift(JSON.parse(res.bodyText).data.comment);//评论列表更改

                        }else if(JSON.parse(res.bodyText).data.comment.comment_depth == 2){

                            this.list.forEach(function(value,index){
                                if(value.comment_id === JSON.parse(res.bodyText).data.comment.parent_id){
                                    value.reply.push(JSON.parse(res.bodyText).data.comment);
                                    console.log(value);
                                }
                            });

                        }
                    }
                });
            },
            //删除确认
            delConfirm(item,index,index2){
                this.$confirm('您要删除此条信息吗?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    this.Posthttp('/?method=flower.user.deleteComment',{member_id:this.getMemberId(),comment_id:item.comment_id},(res)=>{
                        this.loading = false;
                        if(JSON.parse(res.bodyText).status ===1){//删除成功后本地数据改动

                            if(index2 === -1){//一层数组删除
                                this.list.splice(index,1);
                            }else{//二层数组删除
                                this.list[index].reply.splice(index2,1); 
                            }

                        }else{
                            this.$message.warning(JSON.parse(res.bodyText).msg); 
                        }
                    });
                }).catch(() => {
                    //do nothing         
                });;
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Mydiscuss{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: .8rem;
        overflow-y: auto;
        background-color: #f2f2f2;
        .main{
            bottom: 0;
            padding-bottom: 1rem;
            overflow-x: hidden;
        }
        /**/
        .list{
            li.items{
                padding: .3rem .2rem;
                background-color: #fff;
                margin-top: .2rem;
                /*上*/
                .head{
                    img{
                        width: 1rem;
                        height: 1rem;
                        float: left;
                        border-radius: 100%;
                    } 
                    .info{
                        margin-left: 1rem;
                        padding: 0 .2rem;
                        h2{
                            font-weight: 600;
                            font-size: .3rem;
                            color: #333;
                            padding-top: .2rem;
                        }
                        p{
                            font-size: .22rem;
                            color: #777;
                            margin-top: .05rem;
                            width: 100%;
                        }
                    }
                }
                /*删除按钮*/
                span.btn{
                    color: #e7470e;
                    font-size: .26rem;
                    margin-left: .4rem;
                }
                /*中*/
                .content{
                    line-height: .4rem;
                    padding: .2rem 0;
                }
                /*二层回复*/
                .secend{
                    margin: 0 0 .2rem;
                    padding: .28rem .16rem;
                    background-color: #f8f8f8;
                    border: 1px solid #dbdbdb;
                    li{
                        line-height: .36rem;
                        margin-bottom: .24rem;
                        &:last-child{
                            margin-bottom: 0;
                        }
                        b{
                            color: #1f83e0;
                            font-weight: 600;
                        }
                    }
                }
                /*下*/
                .lesson{
                    @extend .head;
                    background-color: #f6f6f6;
                    img{
                        width: 2rem;
                        height: auto;
                        border-radius: 0;
                    }
                    .info{
                        margin-left: 2rem;
                        h2{
                            font-size: .24rem;
                            padding-top: .24rem;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }  
                        p{
                            margin-top: .12rem;
                            line-height: .34rem;
                            text-align: justify;
                        }
                    }
                }
            }
        }
        /*replyBox*/
        .replyBox{
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: .8rem;
            line-height: .8rem;
            background: #fff;
            padding: 0 .2rem;
            color: #666;
            input{
                width: 88%;
                height: 100%;
                outline: none;
                float: left;
                border: 0;
                padding-left: .2rem;
            }
            span.send{
                width: 12%;
                display: inline-block;
                float: left;
                font-size: .28rem;
                height: 100%;
                text-align: right;
            }
        }
    }
</style>
